<template>
  <div class="dashboard-editor-container">
    <el-row type="flex">
      <el-col
        :span="12"
        :gutter="20"
        class="chart-wrapper"
        style="background-color: #fff; margin: 10px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <EnterpriseFlow :companyNatureList="companyNatureList" />
          </el-col>
          <el-col :span="12">
            <el-table :data="companyNatureList" style="width: 100%;" border>
              <el-table-column
                type="index"
                prop="prop"
                label="排名"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="企业性质"
                width="width"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="count"
                label="人数"
                width="width"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
      <el-col
        :span="12"
        :gutter="20"
        class="chart-wrapper"
        style="background-color: #fff; margin: 10px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <EnterpriseScaleFlow :companyScaleList="companyScaleList" />
          </el-col>
          <el-col :span="12">
            <el-table :data="companyScaleList" style="width: 100%" border>
              <el-table-column
                type="index"
                prop="prop"
                label="排名"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="企业规模"
                width="width"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="count"
                label="人数"
                width="width"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      class="chart-wrapper"
      style="background-color: #fff; margin: 10px"
    >
      <el-col :span="12">
        <RegionalFlowDirection :companyFlowList="companyFlowList" />
      </el-col>
      <el-col :span="12">
        <el-table :data="companyFlowList" style="width: 100%" border>
          <el-table-column
            type="index"
            prop="prop"
            label="排名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="地区"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="count"
            label="人数"
            width="width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      class="chart-wrapper"
      style="background-color: #fff; margin: 10px"
    >
      <el-col :span="12">
        <IndustryFlowDirection :companySectorList="companySectorList" />
      </el-col>
      <el-col :span="12">
        <el-table :data="companySectorList" style="width: 100%;" border>
          <el-table-column
            type="index"
            prop="prop"
            label="排名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="行业"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="count"
            label="人数"
            width="width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EnterpriseFlow from "./components/EnterpriseFlow";
import EnterpriseScaleFlow from "./components/EnterpriseScaleFlow";
import RegionalFlowDirection from "./components/RegionalFlowDirection";
import IndustryFlowDirection from "./components/IndustryFlowDirection";
import {
  companyNatureApi,
  companyScaleApi,
  companyFlowApi,
  companySectorApi,
} from "@/api/portrait";
export default {
  components: {
    EnterpriseFlow,
    EnterpriseScaleFlow,
    RegionalFlowDirection,
    IndustryFlowDirection,
  },
  data() {
    return {
      companyNatureList: [],
      companyScaleList: [],
      companyFlowList: [],
      companySectorList: [],
    };
  },
  created() {
    this.companyNature();
    this.companyScale();
    this.companyFlow();
    this.companySector();
  },
  methods: {
    // 企业性质
    async companyNature() {
      const res = await companyNatureApi();
      this.companyNatureList = res.data;
    },
    // 企业规模
    async companyScale() {
      const res = await companyScaleApi();
      this.companyScaleList = res.data;
    },
    // 地区流向
    async companyFlow() {
      const res = await companyFlowApi();
      this.companyFlowList = res.data;
    },
    // 行业流向
    async companySector() {
      const res = await companySectorApi();
      this.companySectorList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.el-table {
  max-height: 360px; /* 限制表格的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
